<template>
    <div class="search">
        <el-input
            v-trim
            ref="inputRef"
            class="keyword"
            :class="{ focus: isFocus }"
            v-model="keyword"
            clearable
            :placeholder="palceholder || '请输入关键字检索'"
            @input="$emit('update:modelValue', keyword)"
            @focus="() => (isFocus = true)"
            @blur="() => (isFocus = false)"
            @keyup.enter="handleEnter"
            @clear="handleClear"
        >
            <template #prefix>
                <SCIcon><Search /></SCIcon>
            </template>
        </el-input>
    </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { ref, watch } from "vue";
const props = defineProps(["modelValue", "palceholder"]);
const emit = defineEmits(["update:modelValue", "search"]);
const keyword = ref(props.modelValue);
watch(
    () => props.modelValue,
    (val) => (keyword.value = val),
);
const inputRef = ref<any>(null);
const isFocus = ref(false);
function handleEnter() {
    inputRef.value.blur();
    emit("search", keyword);
}

function handleClear() {
    inputRef.value.blur();
    emit("update:modelValue", "");
    emit("search", "");
}
</script>

<style lang="scss">
.search {
    .el-input.keyword {
        border: 1px solid #dadcdf;
        width: 280px;
        &.focus {
            border: 1px solid var(--el-color-primary);
        }
        border-radius: 4px;
        .el-input__wrapper {
            background: #fff;
            box-shadow: none;
        }
    }
}
</style>
